<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
    <!--<meta charset="UTF-8">-->
    <!--<title>动画</title>-->
    <!--<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>-->

    <!--<style>-->
        <!--.box{-->
            <!--height:500px;-->
            <!--background-color:black;-->
            <!--overflow: hidden;        }-->

        <!--//给过渡的name加样式-->

          <!--.mybox-leave-active,.mybox-enter-active{-->
              <!--transition: all 1s ease;-->
          <!--}-->
        <!--.mybox-leave-active,.mybox-enter{-->
            <!--height:0px !important;-->
        <!--}-->
        <!--.mybox-leave,.mybox-enter-active{-->
            <!--height: 500px;-->
        <!--}-->
    <!--</style>-->
<!--</head><body>-->

<!--&lt;!&ndash; 首先将要过渡的元素用transition包裹，并设置过渡的name） &ndash;&gt;-->

<!--<div id="box">-->
    <!--<transition name="mybox">-->
        <!--<div class="box" v-show="boxshow"></div>-->
    <!--</transition>-->
    <!--<button @click="togglebox">按钮</button>-->
<!--</div>-->

<!--<script>-->
    <!--new Vue({-->
        <!--el:'#box',-->
        <!--data:{-->
            <!--boxshow:false-->
        <!--},-->
        <!--methods:{-->

            <!--togglebox:function(){-->
                <!--this.boxshow = !this.boxshow;-->
            <!--}-->
        <!--}-->
    <!--});-->


<!--</script>-->
<!--</body>-->
<!--</html>-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<style>
    .v-enter,
    .v-leave-to{
        opacity: 0;
        transform: translateX(100px);
    }
    .v-enter-active,
    .v-leave-active{
        transition: all 0.4s ease;
    }



</style>

<body>
<div id="app">


    <input type="button" value="点击我显示/取消" @click="flag=!flag">

    <transition>
        <h3 v-if="flag">先希望你孝顺 再愿你成熟努力 一是责任 而是安全感 很想遇到这种人 最好可以晚一点
            不要心急也不要焦虑 等我们远离时常赌气的年纪 懂得包容和鼓励 也许你是对的人
            但现在不是对的时间 等你 也等自己</h3>
    </transition>

    <h2>凡人总有取舍 你取了你认为重要的东西 舍弃了我 这只是你的选择而已 若是我因为我没有被选择就心生怨恨
        那这世间 岂不是有太多不可原谅之处 毕竟谁也没有责任要以我为先 以我为重 无论我如何希望 也不能强求</h2>
</div>


<script>

    var app = new Vue({
        el: '#app',
        data:{
            flag: false


        },
        methods: {

        },
        created: function () {

        },
        mounted: function () {

        }
    })

</script>
</body>
</html>

